<template>
	<div class="detail">
		<c-head text="拼团"></c-head>
		<div class="wrap">
			<div class="menu">
				<span class="user">
					<img :src="arr.url" alt="">
				</span>
				<span>
					<p>{{ arr.names }}</p>
					<p style="font-size: 15px; font-weight: bold">
						我发现了一件好货,一起邀请好友拼团吧
					</p>
				</span>
			</div>

			<div class="card">
				<dl>
					<dt>
						<img :src="arr.url" alt="" />
					</dt>
					<dd class="kua">
						<h4>{{ arr.names }}</h4>
						<p class="tuanAll">
							<span class="tuan"
								><img src="../../assets/images/pt1.png"
							/></span>
							<span style="color: red; font-weight: bold">免费拿</span>
							<s style="color: #ccc; font-size: 8px">原价:{{ arr.price }}.00</s>
						</p>
						<span class="gold">RMB {{ arr.price - 100 }}.00</span>
					</dd>
				</dl>
			</div>
			<div class="canvas">
				<h2>
					已有<b style="color: red">1</b>参团,还差<b style="color: red"
						>{{ arr.max }} </b
					>人
				</h2>
				<van-progress
					pivot-text=""
					color="#ee0a24"
					:percentage="70"
					stroke-width="9"
				/>
			</div>

			<span class="yaoyao">邀请好友拼团</span>
			<span class="yaoyao3">
				还剩 <van-count-down :time="times" />后过期，快来砍价吧！
			</span>
			<span class="yaoyao2">拼团记录</span>
			<div class="menuY">
				<template v-if='arr.children'>
					<dl class="one"	v-for="(item,index) in arr.children" :key="index">
						<dt><img :src="item.img" alt="" /></dt>
						<dd class="left">
							<span class="name">{{ item.name1 }}</span>
							<span style="font-size: 10px">金刀拼一拼</span>
						</dd>
						<dd>
							<span>
								<b style="color: red">已拼团</b>
								<span style="font-size: 10px; color: #aaa"
									>(还差77人)</span
								></span
							>
						</dd>
					</dl>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
import CHead from "../../components/headers";
export default {
	name: "teamDetail",
	components: {
		CHead,
	},
	data() {
		return {
			times: 59.2 * 60 * 1000 * 24,
			arr: this.$route.query.id,
		};
	},
};
</script>

<style  scoped>
.van-count-down {
    color: #323233;
    font-size: 14px;
    line-height: 42px;
    color: red;
    width: 57px;
}
.left {
	margin-left: -85px;
}
.name {
	display: block;
}
.kua {
	margin-left: 10px;
}
.one {
	display: flex;
	justify-content: space-between;
	padding: 10px;
	align-items: center;
}
.one > dt {
	width: 50px;
	height: 50px;
}
.one > dt > img {
	border-radius: 50%;
	width: 100%;
	height: 100%;
}
.menuY {
	width: 96%;
	height: 210px;
	background: #eee;
	overflow: scroll;
	margin: 0 auto;
}
.yaoyao {
	display: flex;
	width: 96%;
	height: 40px;
	line-height: 40px;
	margin: 0 auto;
	background: red;
	justify-content: center;
	color: #fff;
	margin-top: 20px;
	border-radius: 6px;
	background: linear-gradient(
		to right,
		rgb(252, 111, 37),
		rgb(252, 74, 38),
		rgb(252, 42, 38)
	);
}
.yaoyao3 {
	display: flex;
	width: 96%;
	height: 40px;
	line-height: 40px;
	margin: 0 auto;
	background: #fff;
	justify-content: center;
	border-radius: 6px;
}
.yaoyao2 {
	font-weight: bold;
	display: flex;
	width: 96%;
	height: 40px;
	line-height: 40px;
	margin: 0 auto;
	background: #eee;
	justify-content: center;
	margin-top: 10px;
	border-radius: 6px;
}
.canvas >>> .van-progress {
	position: relative;
	height: 4px;
	background: rgb(252, 240, 240);
	border-radius: 4px;
}
.gold {
	background: rgb(251, 246, 230);
	color: rgb(240, 169, 66);
	padding: 1px 6px;
	border: 2px solid rgb(240, 169, 66);
	line-height: 18px;
	border-radius: 10px;
	margin-top: 10px;
	display: inline-block;
}
.canvas {
	width: 90%;
	text-align: center;
	margin: 0 auto;
	font-size: 10px;
	margin-top: 20px;
}
.canvas > h2 {
	margin-bottom: 10px;
}
.tuanAll {
	display: flex;
	align-items: center;
	height: 20px;
}
.detail {
	width: 100%;
	height: 100%;
	background-image: url(../../assets/images/1.jpg);
	background-position: -200px 0px;
	background-size: 100% 105%;
	font-size: 10px;
}
.wrap {
	width: 96%;
	height: 91%;
	background: #ffff;
	margin: 0 auto;
	border-radius: 15px;
}
.menu {
	display: flex;
	align-items: center;
	padding: 10px;
}
.user {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: chartreuse;
	margin-right: 10px;
}
.card {
	background: #eee;
	width: 95%;
	height: 122px;
	margin: 0 auto;
}
.card > dl {
	display: flex;
	padding: 0 10px;
	align-items: center;
}
.card > dl > dt > img {
	width: 100%;
	height: 100%;
}
.card > dl > dt {
	width: 85px;
	height: 122px;
}
.card > dl > dd > h4 {
	margin: 10px 0;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	word-break: break-all;
}
.tuanAll > s {
	margin-left: 45px;
}
.tuan {
	width: 58px;
	height: 28px;
}
</style>